<template>
    <el-popover placement="bottom" :width="200" trigger="click" :visible="visiblePopour" ref="popoverRef">
        <template #reference>
            <slot></slot>
        </template>
        <slot name="popour"></slot>
    </el-popover>
</template>
<script lang="ts" setup>
import { ref, watch } from 'vue'
import { onClickOutside } from '@vueuse/core';
const props = defineProps<{ visible: boolean }>();
const emit = defineEmits(['toogleVisible']);
const visiblePopour = ref<boolean>(false);


const popoverRef = ref(null);

// 使用 onClickOutside 来处理外部点击
onClickOutside(popoverRef, () => {
    emit('toogleVisible', false);
});
watch(() => props.visible, (newVal, oldVal) => {
    visiblePopour.value = newVal;
})
</script>
<style lang="less" scoped></style>